<template>
    <div class="timeline" :style="timelinestyle">
         <slot></slot>   
    </div>
</template>


<script>

export default {
    name:'timeline',
    props:{
		leftorright:{
            type:String,
            default:"left",
            required:true,
        },
        bottom:{
            type:Boolean,
            default:false
        },
        iconcolor:{
            type:String,
            default:"#42526D"
        }
	},
    mounted(){
        
    },
    components:{
       
    },
    computed:{
        timelinestyle(){
            class timelineStyle{
                constructor(leftright,border){
                    this.leftright=leftright;
                    this.border=border;
                }
                style(){
                    return `${this.leftright}:${this.border}`
                }
            }
            if(this.leftorright.indexOf("left")!=-1){
                let obj=new timelineStyle('borderLeft',`2px solid ${this.iconcolor}`)
                return obj.style()
            }
            else{
                let obj=new timelineStyle('borderRight',`2px solid ${this.iconcolor}`)
                return obj.style()  
            }
        }
    }
}    
</script>

<style scoped>
   .timeline{
       width: 100%;
       
   }
  
</style>
 
  
